<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />

    <title>Login</title>
<link href="js/metroui/css/metro.css" rel="stylesheet">
<link href="js/metroui/css/metro-colors.css" rel="stylesheet">
<link href="js/metroui/css/metro-icons.css" rel="stylesheet">
<link href="js/metroui/css/metro.css" rel="stylesheet">
<link href="js/metroui/css/metro-responsive.css" rel="stylesheet">
<link href="js/metroui/css/metro-schemes.css" rel="stylesheet">
<link href="js/metroui/css/metro-rtl.css" rel="stylesheet">
<link href="js/metroui/css/docs.css" rel="stylesheet">

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/metroui/js/metro.js"></script>
<script src="js/metroui/js/docs.js"></script>
<script src="js/metroui/js/ga.js"></script>
 
    <style>
        .login-form {
            width: 25rem;
            height: 20rem;
            position: fixed;
            top: 50%;
            margin-top: -9.375rem;
            left: 50%;
            margin-left: -12.5rem;
            background: #ffffff;
            opacity: 0;
            -webkit-transform: scale(.8);
            transform: scale(.8);
        }
    </style>

    <script>




        $(function(){
            var form = $(".login-form");

            form.css({
                opacity: 1,
                "-webkit-transform": "scale(1)",
                "transform": "scale(1)",
                "-webkit-transition": ".5s",
                "transition": ".5s"
            });
        });
    </script>
</head>
<body style="background:url(images/87.jpg);">
    <div class="login-form padding20 block-shadow">
        <form action="login.action" method="post">
            <h1 class="text-light">Login to service</h1>
            <hr class="thin"/>
            <br />

<div class="input-control modern text full-size" data-role="input">
    <input type="text" name="user.username">
    <span class="label">You login</span>
    <span class="informer">Please enter you login or email</span>
    <span class="placeholder">Input login</span>
    
</div>
            <br />
            <br />
            <div class="input-control modern password full-size"  data-role="input">
    <input type="password" name="user.password" >
    <span class="label">You password</span>
    <span class="informer">Please enter you password</span>
    <span class="placeholder">Input password</span>
    
    <button class="button helper-button reveal"></button>
</div>
            <br />
            <br />
            <input type="hidden" name="request_locale" value="en_US"> 
            
            <div class="form-actions">
                <button type="submit" class="button primary">Login</button>
                <button type="button" class="button link" onclick="window.location.href=encodeURI('register.html')">Sign in</button>
            </div>
        </form>
    </div>
</body>
</html>